<template>
  <div class="container">
    <el-form :model="form_data" style="height: 100%">
      <div class="flex" style="width: 100%; height: 100%">
        <div
          class="flex"
          style="overflow-x: auto; padding: 8px 0"
          @wheel="handleScroll($event)"
        >
          <div v-for="item in form_data" style="flex-shrink: 0">
            <el-form-item :label="item.label" v-if="item.type == 'input' && item.isShow">
              <el-input
                v-model="item.value"
                placeholder="请输入"
                clearable
                maxlength="19"
              ></el-input>
            </el-form-item>
            <el-form-item
              :label="item.label"
              v-if="item.type == 'input_number' && item.isShow"
            >
              <div class="flex">
                <el-input
                  type="number"
                  v-model="item.value[0]"
                  placeholder="请输入最小值"
                  clearable
                  maxlength="19"
                ></el-input>
                <span class="m_0_10">-</span>
                <el-input
                  type="number"
                  v-model="item.value[1]"
                  placeholder="请输入最大值"
                  clearable
                  maxlength="19"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item :label="item.label" v-if="item.type == 'select' && item.isShow">
              <el-select v-model="item.value" placeholder="请选择">
                <el-option
                  v-for="item1 in item.options"
                  :label="item1.label ? item1.label : item1.name"
                  :value="item1.value ? item1.value : item1.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 特殊处理的select -->
            <el-form-item
              :label="item.label"
              v-if="item.type == '*select' && item.isShow"
            >
              <el-cascader
                v-if="item.label == '产品 - 等级'"
                v-model="item.value"
                :options="item.options"
              />
              <div v-if="item.label == '升级类型'">
                <el-select v-model="item.value[0]" placeholder="初始升级等级">
                  <el-option
                    v-for="item1 in item.options"
                    :label="item1.label ? item1.label : item1.name"
                    :value="item1.value ? item1.value : item1.id"
                  ></el-option>
                </el-select>
                <span class="m_0_10">-</span>
                <el-select v-model="item.value[1]" placeholder="最终升级等级">
                  <el-option
                    v-for="item1 in item.options"
                    :label="item1.label ? item1.label : item1.name"
                    :value="item1.value ? item1.value : item1.id"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item
              :label="item.label"
              v-if="(item.type == 'date' || item.type == 'dateDay') && item.isShow"
            >
              <el-date-picker
                v-if="item.type == 'date'"
                style="width: 100%"
                v-model="item.value"
                placeholder="请选择"
                format="YYYY-MM-DD"
                value-format="x"
                type="daterange"
                range-separator="至"
                start-placeholder="起始日期"
                end-placeholder="终止日期"
                :shortcuts="shortcuts"
              ></el-date-picker>
              <el-date-picker
                v-if="item.type == 'dateDay'"
                style="width: 100%"
                v-model="item.value"
                placeholder="请选择"
                format="YYYY-MM-DD"
                value-format="x"
                type="date"
              ></el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="flex" style="flex-shrink: 0; padding-right: 20px">
          <el-dropdown :hide-on-click="false">
            <svgBtn
              class="search_setup_icon"
              :style="{
                backgroundColor: svg_color_list[0] == '#3580eb' ? '#ECF4FF' : '',
              }"
              :color="svg_color_list[0]"
              @mouseenter="svg_color_list[0] = '#3580eb'"
              @mouseleave="svg_color_list[0] = '#45474A'"
              icon="setup"
            ></svgBtn>
            <template #dropdown>
              <el-dropdown-menu>
                <div style="overflow-y: auto; max-height: 600px">
                  <el-dropdown-item
                    v-for="(item, index) in form_data"
                    :key="index"
                    @click="$emit('changeIsShow', index)"
                  >
                    <div class="flex">
                      <svgBtn
                        icon="xuanzhong_1"
                        style="font-size: 14px"
                        v-if="item.isShow"
                        class="m_right10"
                      ></svgBtn>
                      <span v-else class="checkbox_empty"></span>
                      <span class="m_left10">{{ item.label }}</span>
                    </div>
                  </el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="m_left20 flex">
            <el-button type="primary" @click="$emit('search')">查询</el-button>
            <el-button @click="$emit('reset')">重置</el-button>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import svgBtn from "@/components/svg_button.vue";
import axios from "@/service/HttpRequest";
import serviceApi from "@/service/api";
import { ref, toRefs, watch } from "vue";
const svg_color_list = ref(["#45474A", "#45474A", "#45474A"]);
const props = defineProps({
  form_data: {
    type: Object,
    default: [],
  },
});
// toRefs 结构 变成响应式
const { form_data } = toRefs(props);
console.log(form_data);
// const pickerOptions = ref({
//   disabledDate(time) {
//     // 这个是当前日期后的日期不可选
//     return time.getTime() > Date.now()
//   },
// })

const shortcuts = [
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

// sheet页x轴滚动计算
const handleScroll = (e) => {
  // e.wheelDelta或者e.detail判断滚轮方向
  const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
  // 控制左右滚动的距离
  e.currentTarget.scrollLeft -= delta * 100;
  e.preventDefault;
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  margin-bottom: 10px;
  height: 72px;
  line-height: 72px;
}
.search_setup_icon {
  font-size: 20px !important;
  padding: 5px;
  margin: 0 10px;
  border-radius: 3px;
  height: 20px;
  line-height: 20px;
}
.checkbox_empty {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #68686a;
  border-radius: 2px;
  margin-right: 10px;
}
.checkbox_empty:hover {
  border-color: #3580eb;
}
:deep(.el-form-item__label) {
  margin-left: 20px;
}
:deep(.el-input__wrapper) {
  width: 200px;
}
</style>
